<template>
	<div class="user-box">
		<img class="bg" :src="pic"/>
		<div class="setbtn"><span class="icon shezhi1"></span></div>
		<div class="userLogin">
			<div>
				<img class="portrait" src="/static/avatar.png"/>
			</div>
			<div>
				<span class="username">点击登录</span>
			</div>
		</div>
		<div class="userInfo">
			<div class="userInfo-item">
				<span class="userInfo-num">2500</span>
				<span>积分</span>
			</div>
			<div class="userInfo-item">
				<span class="userInfo-num">85</span>
				<span>收藏</span>
			</div>
			<div class="userInfo-item">
				<span class="userInfo-num">123</span>
				<span>关注</span>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		pic: {
			type : String,
			default : 'static/user_bg.jpg'
		}
	},
	data() {
		return {
		}
	},
	mounted() {
	},
	methods: {
	}
}
</script>

<style lang='less'>
	.user-box{
		height: 180px;
		padding: 30px 15px 0;
		position:relative;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
		.setbtn{
			position: absolute;
			z-index: 2;
			top: 60px;
			right: 25px;
			width: 25px;
			height: 25px;
			span{
				color:#ffffff;
				font-size:16px;
			}
		}
		.userLogin{
			height: 90px;
			display:flex;
			align-items:center;
			position:relative;
			z-index: 1;
			.portrait{
				overflow:hidden;
				display: block;
				width: 60px;
				height: 60px;
				border: 2px solid #fff;
				border-radius: 50%;
			}
			.username{
				overflow:hidden;
				display: block;
				font-size: 18px;
				color: #ffffff;
				margin-left: 10px;
			}
		}
		.userInfo{
			width: 100%;
			display:flex;
			position:relative;
			z-index: 1;
			border-radius: 10px;
			background: #ffffff;
			.userInfo-item{
				display:flex;
				justify-content: space-around;
				align-content: center;
				align-items:center;
				flex-direction: column;
				width: 100%;
				height: 50px;
				font-size: 14px;
				color: #75787d;
			}
			.userInfo-num{
				font-size: 16px;
				color: #333333;
			}
		}
	}
</style>